<!--
 * @Author: wjk
 * @Date: 2019-11-18 16:48:07
 * @LastEditors  : wangzm
 * @LastEditTime : 2020-01-08 14:05:45
 * @description: 基础文字组件
 -->
<template>
  <view :class="'text-box ' + type" @click="clickMetch">
    <text :class="'text ' + type" :selectable="selectable" :space="space" :decode="decode" :style="'color: '+color"><!--  支持 \n 方式换行 -->
      <template v-if="text">
        {{ text }}
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </text>
  </view>
</template>

<script>
export default {
  name: 'BaseText',
  props: {
    text: { // 动态文本数据
      type: String,
      default: ''
    },
    // 文本是否可选
    selectable: {
      type: Boolean,
      default: false
    },
    // 显示连续空格 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小
    space: {
      type: String,
      default: ''
    },
    // 是否解码 decode 可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
    decode: {
      type: Boolean,
      default: false
    },
    type: { // normal:正常 one: 单行, 溢出省略号 two: 两行, 溢出省略号
      type: String,
      default: 'normal'
    },
    color: { // 颜色值
      type: String,
      default: '#333'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    clickMetch() {
      console.log('clickMetch')
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss">
.text-box{
  .text{
    width: 100%;
  }
}
.one{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.two{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
